<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>地区管理管理</title>
		<link rel="stylesheet" href="../../component/ui/css/ui.css" />
	</head>
	<body class="pear-container">
		
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="area-table" lay-filter="area-table"></table>
			</div>
		</div>

		<script type="text/html" id="area-toolbar">
			 <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
		</script>
		<script type="text/html" id="area-enable">
            <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|不启用" lay-filter="status"  {{ d.status == 1 ? 'checked' : '' }}/>
        </script>

		<script type="text/html" id="area-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
		<script type="text/html" id="area-time">
			{{layui.util.toDateString(d.add_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
		</script>
		<script src="../../config/config.js"></script>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/ui/ui.js"></script>
		<script>
			layui.use(['table', 'form', 'jquery','common', 'treetable'], function() {
				let table = layui.table;
				let form = layui.form;
				let $ = layui.jquery;
				let common = layui.common;
				let treetable = layui.treetable;

				let MODULE_PATH = "./";

				 window.render = function () {
                    treetable.render({
                        treeColIndex: 1,
                        treeSpid: 0,
                        treeIdName: 'id',
                        treePidName: 'pid',
                        skin: 'line',
                        treeDefaultClose: true,
                        toolbar: '#area-toolbar',
                        elem: '#area-table',
                        url: 'area/list',
                        page: false,
                        cols: [
                            [
                                {
                                    field: 'id',
                                    title: 'ID'
                                }, {
                                    field: 'name',
                                    minWidth: 200,
                                    title: '名称'
                                }, {
                                    field: 'order_num',
                                    title: '排序'
                                }, {
                                    field: 'status',
                                    title: '是否启用',
                                    templet: '#area-enable'
                                }, {
                                    title: '操作',
                                    templet: '#area-bar',
                                    width: 150,
                                    align: 'center'
                                }
                            ]
                        ]
                    });
                }

                render();
				table.on('tool(area-table)', function (obj) {
                    if (obj.event === 'remove') {
                        window.remove(obj);
                    } else if (obj.event === 'edit') {
                        window.edit(obj);
                    }
                    else if(obj.event === 'sql') {
                        window.sql(obj);
                    }
                })

                table.on('toolbar(area-table)', function (obj) {
                    if (obj.event === 'add') {
                        window.add();
                    } else if (obj.event === 'refresh') {
                        window.refresh();
                    }
                });
				form.on('switch(status)', function (data) {
					let v = 0;
					if (data.elem.checked) v = 1;
					let postData = {
						id : data.value,
						status : v
					};
					_post(layui, 'area/enable', postData, res => {
						//console.log(res)
					},err => {
						$(data.elem).prop('checked', false);
						form.render('checkbox');
					})
				});
				window.add = function() {
					layer.open({
						type: 2,
						title: '新增',
						shade: 0.1,
						offset: 'rt',
						area: ['80%', '100%'],
						anim: 1,
						maxmin: true,
						content: MODULE_PATH + 'edit.html'
					});
				}

				window.edit = function(obj) {
					layer.open({
						type: 2,
						title: '修改',
						shade: 0.1,
						offset: 'rt',
						area: ['80%', '100%'],
						anim: 1,
						maxmin: true,
						content: MODULE_PATH + 'edit.html?id=' + obj.data.id
					});
				}
				window.remove = function(obj){
		            layer.confirm('确定要删除', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
		                _post(layui, 'area/del',{id : obj.data.id}, res => {
							layer.msg('删除成功',{icon:1,time:1000},() => {
								obj.del();
							});
						}, err => {
							//layer.msg('删除失败',{icon:2,time:1000});
						})
		            });
		        }


				window.refresh = function(param) {
					table.reload('area-table');
				}
			})
		</script>
	</body>
</html>